<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>project demo</title>
<link  rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css"/>
<link rel="stylesheet" type="text/css" href="js/barousel/barousel_demo.css">
<script  src="js/jquery-1.7.1.min.js"></script>
<script  src="js/barousel/jquery.barousel.min.js"></script>
<script  src="js/barousel/jquery.thslide.min.js"></script>
<script  src="js/fancybox/jquery.fancybox.js"></script>
<script  src="js/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>
$(function(){
	$('#barousel_thslide').barousel({
    navWrapper: '#thslide_barousel_nav .thslide_list',
    manualCarousel: 1,
    navType: 3
});

$('#thslide_barousel_nav').thslide({
    itemOffset: 93
});
});
</script>
<style>
div.ic_myCarousel {
	margin:0px auto 0 auto;
	clear:right;
}

.ic_myCarousel .ic_button {
	float: left;
	height:80px;
	line-height: 25px;
	margin: 0 4px 0 2px;
	width: 206px;
	border: 2px solid #eee;
	background: #ddd;
}
.infiniteCarousel {
	margin: 0 auto !important;
}
.ic_wrapper {
	width: 700px !important;
}
.ic_myCarousel .ic_active {
	background: #fff;
	border: 2px solid #800;
}
.ic_peek_padding {
	padding: 0 20px;
}
.ic_thumbnails{ padding-left:28px}
div p {
	clear: both;
	color: #333333;
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	font-size: 18px;
	text-shadow: 0 1px 1px #C9C9C9;
}
.ic_right_nav{ top:270px !important; right:30px !important;}
.ic_left_nav{ top:270px !important; left:30px !important;}
.fancybox-inner{ overflow:hidden !important;}
</style>
</head>
<body>
<div id="pages">
	<header>
    	<div class="wrapper">
        	<div id="logo"></div>
            <nav>
            	<ul>
                	<li><a href="#">Home</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div id="main"> 
    	<div class="wrapper">
            <div id="page_barouselthslide" class="page">
        <h1><a href="#">Barousel + Thslide</a></h1>
        <div class="content_holder">         
            <p class="intro">Barousel and Thslide can be easily combined together to create a <strong>slideshow</strong>.</p>
            <!-- /// CUSTOM NAVIGATION -->
            <h3>Custom navigation</h3>
            <div id="barousel_thslide" class="barousel">
                <div class="barousel_image">
                    <!-- image 1 -->
                    <iframe longdesc="http://img.youtube.com/vi/X_uyuuJVlw4/2.jpg"  width="600" height="360" src="http://www.youtube.com/embed/X_uyuuJVlw4?rel=0" frameborder="0" allowfullscreen></iframe></li>
                    <!-- image 2 -->
                    <img src="images/barousel_horses_2.jpg" alt="" />
                    <!-- image 3 -->
                    <img src="images/barousel_horses_3.jpg" alt="" />
                    <!-- image 4 -->
                </div>
                <div class="barousel_content">
                    <!-- content 1 -->
                    <div class="default">
                        <p class="header">Horses 1</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
                        <p><a href="#">Link 1</a></p>
                    </div>
                    <!-- content 2 -->
                    <div>
                        <p class="header">Horses 2</p>
                        <p>Nam eros eros, tempor ac hendrerit a, placerat vitae augue. </p>
                        <p><a href="#">Link 2</a></p>
                    </div>
                    <!-- content 3 -->
                    <div>
                        <p class="header">Horses 3</p>
                        <p>Ut euismod suscipit elit, id pulvinar dui viverra ac. Fusce interdum leo sit amet turpis pretium fringilla. </p>
                        <p><a href="#">Link 3</a></p>
                    </div>
                    <!-- content 4 -->
                   
                </div>
                <div id="thslide_barousel_nav" class="thslide">
                    <div class="thslide_nav_previous">
                        <a href="#">&nbsp;</a>
                    </div>
                    <div class="thslide_list">
                        <ul>
                            <iframe longdesc="http://img.youtube.com/vi/X_uyuuJVlw4/2.jpg"  width="600" height="360" src="http://www.youtube.com/embed/X_uyuuJVlw4?rel=0" frameborder="0" allowfullscreen></iframe></li>
                            <li><a href="#"><img src="images/th_barousel_horses_2.jpg" alt="" /><span></span></a></li>
                            <li><a href="#"><img src="images/th_barousel_horses_3.jpg" alt="" /><span></span></a></li>

                       </ul>
                    </div>
                    <div class="thslide_nav_next">
                        <a href="#">&nbsp;</a>
                    </div>
                </div>
            </div>    
        </div>
    </div>
    <footer>
        <div class="wrapper">
        	<section></section>
        </div>
    </footer>
</div>
</body>
</html>
